<template>
  <div class="flex">
    <Input
      class="flex-1"
      v-if="showInput && viewMode === 'edit'"
      v-model:value="selectLabel"
      disabled
    />
    <span v-if="viewMode === 'view'">{{ selectLabel }}</span>
    <Space>
      <a-button
        v-if="viewMode === 'edit'"
        v-bind="props.btnConfig"
        :type="props.btnConfig?.type ? props.btnConfig.type : 'link'"
        @click="handleShow"
        >{{ btnText }}</a-button
      >
      <slot></slot>
    </Space>
    <BasicModal
      title="选择"
      width="60%"
      :height="500"
      @register="register"
      @cancel="open = false"
      @ok="handleOk"
    >
      <BasicTable @register="registerTable" />
    </BasicModal>
  </div>
</template>
<script setup lang="ts">
import { nextTick, ref, watch, computed } from 'vue';
import BasicTable from '@/components/Table/src/BasicTable.vue';
import { useTable } from '@/components/Table/src/hooks/useTable.ts';
import { Input } from 'ant-design-vue';
import BasicModal from '@/components/Modal/src/BasicModal.vue';
import { useModal } from '@/components/Modal/src/hooks/useModal.ts';
import { basicProps } from '@/components/Table/src/props.ts';
import { useMessage } from '@/hooks/web/useMessage';
import { Space } from 'ant-design-vue';
const props = defineProps({
  value: {
    type: [Array, Object, String, Number],
  },
  label: {
    type: [Array, String],
  },
  viewMode: {
    type: String,
    default: 'edit',
  },
  btnConfig: {
    type: Object,
  },
  // 选择按钮文字
  btnText: {
    type: String,
    default: '选择',
  },
  showInput: {
    type: Boolean,
    default: true,
  },
  mode: { type: String },
  valueField: {
    type: String,
    default: 'id',
  },
  labelField: { type: String, default: 'label' },
  tableProps: {
    type: Object,
    ...basicProps,
  },
});

const emit = defineEmits(['update:value', 'change']);

const { createMessage } = useMessage();
const open = ref(false);
// 初始化赋值父组件中服务端返回的名称
const selectLabel = ref();
const [register, { openModal, closeModal }] = useModal();

const [
  registerTable,
  { getSelectRows, clearSelectedRowKeys, setProps, reload },
] = useTable({
  ...props.tableProps,
  rowKey: props.valueField,
  scroll: { y: 300 },
  rowSelection: {
    // 单选是radio
    type: props.mode === 'multiple' ? 'checkbox' : 'radio',
  },
  // isCanResizeParent: true,
  useSearchForm: true,
});
watch(
  () => props.label,
  (val) => {
    selectLabel.value = val;
  },
  {
    immediate: true
  }
);
const handleShow = () => {
  openModal(true, {});
  nextTick(() => {
    clearSelectedRowKeys();
    setProps(props.tableProps);
    reload();
  });
};

const handleOk = () => {
  const rows = getSelectRows();
  if (rows && rows.length) {
    if (props.mode !== 'multiple') {
      const value = rows[0][props.valueField];
      selectLabel.value = rows[0][props.labelField];
      emit('update:value', value);
      // 触发change 携带选中值和选中值对应的数据
      emit('change', value, rows[0]);
    } else {
      const value = rows.map((d) => d[props.valueField]);
      selectLabel.value = rows.map((d) => d[props.labelField]);
      emit('update:value', value);
      // 触发change 携带选中值和选中值对应的数据
      emit('change', value, rows);
    }
    closeModal();
  } else {
    createMessage.error('请选择一条记录！');
  }
};
</script>
<style lang="less" scoped></style>
